<template>
    <el-sub-menu expand-close-icon="ArrowRight" expand-open-icon="ArrowDown" v-if="menuList.children" :index="menuList.jingle">
        <template #title>
            <i :class="`verjs-${menuList.img} verjsfont menu-icon`" v-if="menuList.img"/>
            <span>{{ menuList.name }}</span>
        </template>
        <el-menu-item-group>
            <left-menu-child-components v-for="child in menuList.children" :menu-list="child" :key="child.id"/>
        </el-menu-item-group>
    </el-sub-menu>
    <el-menu-item :index="menuList.jingle" v-else>
        <i :class="`verjs-${menuList.img} verjsfont menu-icon`" v-if="menuList.img"/>
        <template #title>{{ menuList.name }}</template>
    </el-menu-item>
</template>

<script setup>
import {defineProps} from "vue";

defineProps({
    menuList: {
        type: Object
    }
})
</script>

<style scoped>
.menu-icon {
    padding-right: 15px;
}
</style>